<!-- 请假单打印 -->
<template>
	<view class="leave_body" style="padding-bottom:60rpx;">
		<view class="leaveapply_box">
			<view class="leave_title">
				请假人基本信息
			</view>
			<view class="leave_row">
				<span class='leave_row_left'>学生姓名</span>
				<span class='leave_row_right'>{{username}}</span>
			</view>
			<view class="leave_row">
				<span class='leave_row_left'>学生学号</span>
				<span class='leave_row_right'>{{id}}</span>
			</view>
			<view class="leave_row">
				<span class='leave_row_left'>学生班级</span>
				<span class='leave_row_right'>{{class_name}}</span>
			</view>
		</view>
		<view class="leaveapply_box">
			<view class="leave_title">
				请假时间
			</view>
			<view class="leave_row">
				<span class='leave_row_left'>开始时间</span>
				<span class='leave_row_right'>{{begintime}}</span>
			</view>
			<view class="leave_row">
				<span class='leave_row_left'>结束时间</span>
				<span class='leave_row_right'>{{endtime}}</span>
			</view>
			<view class="leave_row">
				<span class='leave_row_left'>总时长</span>
				<span class='leave_row_right'>{{hours}} 小时</span>
			</view>
		</view>
		<view class="leaveapply_box2">
			<view class="leave_title">
				请假详情
			</view>
				<textarea disabled='true' :value="reason"></textarea>
		</view>
		<view class="leaveapply_box2">
			<view class="leave_title">
				外出路线描述
			</view>
			<textarea disabled='true' :value="description"></textarea>
		</view>
		<view class="leaveapply_box2" v-if="imgpath!=''">
			<view class="leave_title">
				图片
			</view>
			<image :src="imgpath" mode="widthFix" v-if="imgpath!=''"></image>
		</view>
		<view class="leaveapply_box2">
			<view class="leave_title">
				请假审批
			</view>
			<view class="zhengwen1" style="padding-bottom: 100rpx;position: relative;">
				<text class="approve_name" v-if="fdy!=''">辅导员{{fdy}}已经批准</text>
				<!-- <text class="approve_name" v-if="sj!=''">{{sj}}已经批准</text> -->
				<view class="result_gong" style="position: absolute;right: 40rpx;bottom: 40rpx;">
					<image src="../../static/gzhang@2x.png" style="width: 200rpx;" mode="widthFix" class="result_img"></image>
				</view>
			</view>
		</view>
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				name:'',
				username: '',
				class_name: '计算机应用2班',
				begintime: '2022-6-9',
				endtime: '2022-6-9',
				hours: '4',
				invitation:'',
				overtime:'',
				reason:'',
				revokes:'',
				description: '', //外出路线
				imgpath: '',
				imgshow: false,
				srcArr:[],
				fdy:'', //辅导员
				overrevokes: '生病了，去医院看病。生病了，去医院看病。生病了，去医院看病。生病了，去医院看病。生病了，去医院看病。生病了，去医院看病。生病了，去医院看病。',
				course: 'xxxxxx地铁站，xxxxxx医院，xxxxxxxxx餐厅，xxxxxxxx地铁站，xxxxxxxx公交车，返回学校',
				flag: false,
				
			}
		},
		methods: {
			//获取当前时间
			getTime:function(){
				var date = new Date(),
				year = date.getFullYear(),
				month = date.getMonth() + 1,
				day = date.getDate(),
				hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(),
				minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes(),
				second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
				month >= 1 && month <= 9 ? (month = "0" + month) : "";
				day >= 0 && day <= 9 ? (day = "0" + day) : "";
				var timer = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
				return timer;
					},
			open() {
				this.imgshow = true;
			},
			close() {
				this.imgshow = false;
			},
			chooseimage() {
				uni.chooseImage({
					count: 6,
					sizeType: ['original', 'compressed'],
					sourceType: ['album'],
					success: (res) => {
						this.srcArr = res.tempFilePaths
					}
				});
			},
			submit() {
				uni.showToast({
					title: '提交成功',
					duration: 2000
				});
			},

		},
		onLoad(options) {
			
			this.id = options.id;
			uni.request({
				// url:"/api/leave/searchLeaveDetail",
				url:this.baseUrl+ "/leave/searchLeaveDetail?satoken="+uni.getStorageSync('satoken'),
				method:'POST',
				data: {
					"leave_id":options.id
				},
				withCredentials:true,
				headers: {
				 },
				success:(res) => {
					console.log(res)
					 this.fdy=res.data.result.fdy;
					 // this.imgpath=res.data.result.imgpath;
					 if(res.data.result.imgpath)
					 	this.imgpath = this.baseUrl + "/upload/" +res.data.result.imgpath
					 this.reason=res.data.result.reason;
					
					this.username=res.data.result.username;
					this.id=res.data.result.sno;
					this.class_name=res.data.result.class_name;
					this.begintime=res.data.result.begintime;
					this.endtime=res.data.result.endtime;
					this.hours=res.data.result.hours;
					this.description=res.data.result.description;
					this.overrevokes=res.data.result.overrevokes;
					this.shenpi_status=res.data.result.shenpi_status;
					var dateEnd = new Date(this.enddate);	//结束日期
				    var overtime=new Date(res.data.result.close_leavetime);//销假日期
					var dateDiff = overtime.getTime() - dateEnd.getTime();
					var dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000)); //计算出相差天数				
					var hourstime = dayDiff*24; //计算出小时数
					this.overtime=hourstime;
					if(hourstime>0){						
						this.flag=false;											
					}
					if(hourstime<=0){						
						this.flag=true;
					}
				
				}
			})
			
		},
		components: {
			// imgHD
		}
	}
</script>

<style lang="scss">
	@import url(@/common/common.css);

	.leave-info-box {
		width: 95%;
		margin: 0 auto;
		box-sizing: border-box;
		position: relative;

		.leave-info-content {
			width: 100%;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			padding-top: 20rpx;
			padding-bottom: 20rpx;

			.m_top {
				margin-top: 10rpx;
			}

			.leave-info-name {
				width: 100%;
				box-sizing: border-box;
				margin-bottom: 20rpx;
				justify-content: center;
			}

			.leave-info-classnumber {
				width: 100%;
				box-sizing: border-box;
				display: flex;
				flex-direction: row;

				.class-number {
					flex: 1;

				}

				.class-name {
					flex: 2;

				}
			}

			.time-title {
				margin-top: 40rpx;
				margin-bottom: 20rpx;
			}

			.leave-info-time {
				display: flex;
				width: 100%;
				box-sizing: border-box;
				flex-direction: row;
				border: 1rpx solid #f5f5f5;
				padding: 20rpx;

				.leave-info-left-time {
					flex: 1;

					text {
						letter-spacing: 1rpx;
						line-height: 40rpx;
					}

					.start-date {
						margin-right: 20rpx;
					}

				}

				.leave-info-right-time {
					flex: 1;

					text {
						letter-spacing: 1rpx;
						line-height: 40rpx;
					}

					.end-date {
						margin-right: 20rpx;
					}
				}

			}

			.num-time {
				margin-top: 20rpx;

				.color {
					color: rgb(202, 17, 17);
					line-height: 80rpx;
				}
			}

			.leave-explain-title {
				margin-top: 40rpx;
				margin-bottom: 20rpx;
			}

			.leave-explain-content {
				width: 100%;
				box-sizing: border-box;
				border: 1rpx solid #ccc;
				padding: 20rpx;
			}

			.leave-course-title {
				margin-top: 40rpx;
				margin-bottom: 20rpx;
			}

			.leave-course-content {
				width: 100%;
				height: 160rpx;
				box-sizing: border-box;
				border: 1rpx solid #ccc;
				padding: 20rpx;
			}

			.leave-img-title {
				margin-top: 40rpx;
				margin-bottom: 20rpx;
			}

			.leave-img {
				display: flex;
				width: 100%;
				box-sizing: border-box;
				flex-direction: row;
				padding: 10rpx;
				overflow: hidden;

				.imgbox {
					flex: 1;

					image {
						width: 150rpx;
						height: 150rpx;
					}
				}
			}

			.teacher {
				width: 100%;
				box-sizing: border-box;
				margin-top: 40rpx;

				textarea {
					box-sizing: border-box;
					width: 100%;
					height: 200rpx;
					border: 1rpx solid #ccc;
					padding: 20rpx;
				}
			}

			.yes {
				width: 600rpx;
				height: 80rpx;
				border: #ccc solid 1rpx;
				margin: 0 auto;
				margin-top: 80rpx;
				line-height: 80rpx;
				text-align: center;
				color: #cb1111;
				margin-bottom: 80rpx;
			}



		}

		.shadebox {
			width: 100%;
			height: 100%;
			position: fixed;
			top: 0;
			left: 0;
			box-sizing: border-box;
			background: rgba(0, 0, 0, 0.6);
			padding-top: 50%;

			.shadecontentbox {
				width: 100%;
				height: 100%;
				position: absolute;
				display: flex;

				.imgHD {
					width: 100%;
					// margin-top: -25%;
					display: flex;
					justify-content: center;
				}
			}
		}

		.pad_be {
			padding: 0 20rpx;
		}

		.result {
			display: flex;

			.result_person,
			.result_gong {
				flex: 1;
				overflow: hidden;
			}
			.result_img {
				width: 60%;
			}
		}

		// }

	}
</style>
